<template>
	<view class="myService">
		<u-navbar title=" " bgColor="transparent">
			<view slot="left">服务</view>
		</u-navbar>
		<view class="serviceCon">
			<view class="conTop">
				<image :src="imgUrl + 'mineBg.png'" mode="" class="conTopImg"></image>
				<view class="conTextShoad"></view>
				<view class="conTextBox u-line-2">
					充分展现了我们的专业能力和服务水平。通过这些成功案例，客户能够直
					观了解我们的实力和经验，助力他们做出更明智的选择。
					充分展现了我们的专业能力和服务水平。通过这些成功案例，客户能够直
					观了解我们的实力和经验，助力他们做出更明智的选择。
				</view>
				<view class="rightIcon">
					<u-icon name="arrow-right" color="#fff" size="28rpx"></u-icon>
				</view>
			</view>

			<view class="menuBox flex_heng">
				<view class="menuItem flex_shu" v-for="(item, index) in menuList" :key="index"
					:style="{ background: 'linear-gradient(180deg, ' + item.color + ' 0%, #ffffff00 100%)' }"
					@click="menuClick(item.link)">
					<view class="itemName">
						{{item.name}}<uni-icons type="right" size="12"></uni-icons>
					</view>
					<view class="itemText">
						{{item.text}}
					</view>
					<view class="itemIcon">
						<image :src="imgUrl + item.icon" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBannerList,
		getDadList,
		getList
	} from '@/api/api.js';
	export default {
		computed: {

		},
		data() {
			return {
				imgUrl: this.$imgUrl,
				menuList: [{
						name: '客户管理',
						text: '集中管理客户信息',
						color: '#E8F1FE',
						icon: 'service1.png',
						link: '/pages/package/customer/customer'
					},
					{
						name: '团队成员',
						text: '展示团队结构与职责分工',
						color: '#D5F1FA',
						icon: 'service2.png',
						link: '/pages/package/teamUser/teamUser'
					},
					{
						name: '快速报价',
						text: '高效响应，精准匹配您的预算',
						color: '#FFEAD6',
						icon: 'service3.png'
					},
					{
						name: '历史报价',
						text: '完整记录历史报价',
						color: '#D2FFF0',
						icon: 'service4.png',
						link: '/pages/package/history/history'
					},
					{
						name: '项目管理',
						text: '掌控全局，保障项目高效推进',
						color: '#D0DBFF',
						icon: 'service5.png'
					},
					{
						name: '工单管理',
						text: '统一受理、分派与处理各类工单',
						color: '#FFDDF0',
						icon: 'service6.png'
					},
					{
						name: '产品百科',
						text: '全面了解我们的产品',
						color: '#B5FFE6',
						icon: 'service7.png'
					},
				]
			};
		},
		onLoad() {},

		onShow() {},
		onHide() {

		},
		watch: {

		},
		methods: {
			menuClick(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss">
	.myService {
		width: 100%;
		height: 100vh;
		background: #f6f6f6;
		padding: 0 28rpx;
		box-sizing: border-box;

		.serviceCon {
			width: 100%;
			margin-top: 180rpx;

			.menuBox {
				width: 100%;
				margin-top: 28rpx;
				flex-wrap: wrap;

				.menuItem {
					margin-bottom: 28rpx;
					width: 332rpx;
					height: 134rpx;
					border-radius: 16rpx;
					opacity: 1;
					border: 2rpx solid #ffffff;
					padding: 28rpx;
					box-sizing: border-box;
					font-family: "Alibaba PuHuiTi 2.0";
					justify-content: space-between;
					align-items: flex-start;
					position: relative;

					.itemName {
						color: #000000;
						font-size: 28rpx;
						font-weight: 700;
					}

					.itemText {
						color: #000000;
						font-size: 20rpx;
						font-weight: 400;
					}

					.itemIcon {
						position: absolute;
						right: 28rpx;
						top: 28rpx;
						width: 56rpx;
						height: 56rpx;

						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
				}
			}

			.conTop {
				width: 100%;
				height: 274rpx;
				border-radius: 16rpx;
				opacity: 1;
				background: #fff;
				position: relative;
				overflow: hidden;

				.conTopImg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 274rpx;
				}

				.conTextShoad {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 114rpx;
					border-radius: 0 0 16rpx 16rpx;
					opacity: 1;
					background: linear-gradient(180deg, #00000000 0%, #00b578 100%);
				}

				.conTextBox {
					width: 630rpx;
					position: absolute;
					bottom: 12rpx;
					left: 12rpx;
					color: #ffffff;
					font-size: 20rpx;
					font-weight: 400;
				}

				.rightIcon {
					position: absolute;
					bottom: 18rpx;
					right: 12rpx;
				}
			}


		}
	}
</style>